<template>
  <view :class="baseClass" @tap="onClick">
    <view :class="labelClass" >
      <image v-if="showLabelIcon" :class="labelIconClass" :src="labelIcon" mode="aspectFit"></image>
      {{!showShare ? getLabel : ''}}
      <button v-if="showShare" class="components-btn-share">{{getLabel}}</button>
    </view>
    <!--<slot name="labelSlot">
      <view :class="labelClass" >
        {{getLabel}}{{(param.delimiter && param.delimiter.length > 0) ? param.delimiter : '：'}}
      </view>
    </slot>
    <slot name="valueSlot">
    </slot>-->
    <view :title="data[param.key]" :class="valueClass" v-if="isOnlyShow">{{data[param.key]}}{{unit}}
      <view v-if="param.tipPoint && !data.isRead" class="components-base-single-dot"></view>
    </view>
  </view>
</template>
<script type="text/ecmascript-6">
  export default {
    props: {
      value: [String, Number],
      size: String,
      resize: String,
      disabled: Boolean,
      readonly: Boolean,
      rows: {
        type: Number,
        default: 2
      },
      validateEvent: {
        type: Boolean,
        default: true
      },
      baseClass: Array,
      labelClass: Array,
      labelIcon: Array,
      valueClass: Array,
      suffixIcon: String,
      prefixIcon: String,
      label: String,
      clearable: {
        type: Boolean,
        default: false
      },
      tabindex: String,
      data: Object,
      param: {
        type: Object,
        default: {
          type: 'text',  // input框的类型
          label: '', // 标签显示的文字
          isInput: false, // 是否可输入
          placeholder: '', // 输入框的提示文字
          delimiter: '：', // 标签和内容的间隔符
          key: '' // 内容的字段名
        }
      },
      placeholder: {
        type: String,
        default: ''
      },
      isInput: {
        type: Boolean,
        default: false
      },
      isShowValue: {
        type: Boolean,
        default: true
      }
    },
    data() {
      return {
        currentValue: this.data[this.param.key] === undefined || this.data[this.param.key] === null
                ? ''
                : this.data[this.param.key],
        dataV: {},
        valuetext: '',
//        labeltext: '',
        currentPlaceholder: this.placeholder ? this.placeholder : ''
      };
    },
    watch: {
      placeholder(val) {
        this.currentPlaceholder = val;
      },
      data(data) {
        this.dataV = data;
        this.currentValue = data[this.param.key];
        // console.log('currentValue : ' + JSON.stringify(this.currentValue));
//        this.labeltext = data.label.text;
      },
      clickable() {
        return this.param.clickable;
      }
    },
    computed: {
      // 判断是否是仅仅显示value数据
      isOnlyShow(val) {
        return !this.param.isInput && (this.param.isShowValue === undefined || this.param.isShowValue);
      },
      // 动态绑定的html
      bindHtml(bindHtml) {
        return function (bindHtml) {
          return bindHtml && bindHtml.length > 0 ? bindHtml : '';
        };
      },
      // 动态获取label的值
      getLabel() {
        // console.log('getLabel: ' + JSON.stringify(this.param));
        let label = this.param.label && this.param.label.length > 0 ? this.param.label : '';
        let delimiter = (this.param.delimiter && this.param.delimiter.length > 0) ? this.param.delimiter : '：';
        label = label + delimiter;
        return label;
      },
      showShare() {
        return this.param.label === '分享';
      },
      // 控制是否显示label前面的图标
      showLabelIcon() {
        return this.labelIcon && this.labelIcon.length > 0;
      },
      // label前icon的样式
      labelIconClass() {
        return this.param.iconClass ? this.param.iconClass : ['components-base-single-icon']
      },
      // 返回显示数据的单位（元/吨、天/元， 台等等）
      unit() {
        if (!this.param.unit) {
          return '';
        }
        return this.data[this.param.key] && this.data[this.param.key] !== '' ? this.param.unit : '';
      }
    },
    methods: {
      // 点击事件
      onClick() {
        if (this.param.clickable) {
          console.log('baseSingle on click');
          this.$emit('onClick', this.data, this.param);
        }
      }
    }
  };
</script>
<style>
  .components-base-single-icon {
    width: 32upx;
    height: 32upx;
    margin-right: 10upx;
  }
  .components-btn-share::after {
    border:none
  }
  .components-btn-share {
    height: 60upx;
    line-height: 60upx;
    background-color: #ffffff;
    border-radius: 0;
    padding: 0 0;
    margin:0 0;
    font-size: 26upx;
    color: #45484c;
  }
  .components-base-single-dot{
    width: 16upx;
    height: 16upx;
    border-radius: 100%;
    background-color: #ff0000;
  }
</style>